.sub-masterbar-nav__dropdown,
.sub-masterbar-nav__navbar {
	display: flex;
	flex-direction: column;
	padding: 56px 20px 28px;
	background-color: var( --color-masterbar-background );

	&:not( .is-collapsed ) .sub-masterbar-nav__select {
		background-color: var( --color-primary-dark );
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
	}

	@include breakpoint-deprecated( '>660px' ) {
		flex-direction: row;
		padding: 56px 20px 0 30px;

		&.is-collapsed {
			height: 128px;
			overflow: hidden;
			box-sizing: border-box;
		}
	}
}

.sub-masterbar-nav__dropdown {
	@include breakpoint-deprecated( '>660px' ) {
		display: none;
	}
}

.sub-masterbar-nav__navbar {
	@include breakpoint-deprecated( '<660px' ) {
		display: none;
	}
}


.sub-masterbar-nav__wrapper {
	flex: 1;
	position: relative;
	width: 100%;

	.sub-masterbar-nav__dropdown:not( .is-collapsed ) & {
		border-top: 1px solid var( --color-primary-60 );
	}
}

.sub-masterbar-nav__items {
	display: flex;
	flex-direction: column;

	@include breakpoint-deprecated( '<660px' ) {
		position: absolute;
			top: 0;
			left: 0;
		z-index: 30;
		width: 100%;
		background-color: var( --color-primary-dark );
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;

		.sub-masterbar-nav__dropdown.is-collapsed &,
		.sub-masterbar-nav__navbar.is-collapsed & {
			display: none;
		}
	}

	@include breakpoint-deprecated( '>660px' ) {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.sub-masterbar-nav__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 44px;
	box-sizing: border-box;
	background-color: transparent;
	border: 0;
	outline: 0;
	color: var( --color-masterbar-text );
	font-size: $font-body-small;
	cursor: pointer;
	transition: all 200ms ease-in;

	&:hover,
 	&:focus {
		background: var( --color-masterbar-item-hover-background );
		color: var( --color-masterbar-text );
		outline: 0;
		transition: all 200ms ease-out;

		@include breakpoint-deprecated( '>660px' ) {
			transform: translate3d( 0, -2px, 0 );
		}
	}

	&:visited {
		color: var( --color-masterbar-text ); /* Safari fix */
	}

	&.is-selected {
			background-color: var( --color-masterbar-item-active-background );
			color: var( --color-masterbar-text );
			border-radius: 2px;
	}

	@include breakpoint-deprecated( '<660px' ) {
		padding: 0 15px;

		.sub-masterbar-nav__items &.is-selected {
			color: var( --color-primary-light );
		}
	}

	@include breakpoint-deprecated( '>660px' ) {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 62px;
		margin: 0 10px 10px 0;
		font-size: $font-body-small;
		text-align: center;
		border-radius: 2px;
	}
}

.sub-masterbar-nav__icon {
	display: inline-block;

	@include breakpoint-deprecated( '<660px' ) {
		margin: 0 10px 0 0;
	}
}

.sub-masterbar-nav__label {
	text-transform: capitalize;
}

.sub-masterbar-nav__switch {
	@include breakpoint-deprecated( '>660px' ) {
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		height: 62px;
		color: var( --color-neutral-0 );
	}
}

.sub-masterbar-nav__ellipsis {
	display: block;
	outline: 0;
	cursor: pointer;
	transition: transform 0.2s;

	&.is-open {
		transform: rotate( 90deg );
	}
}

.sub-masterbar-nav__select {
	position: relative;
	width: 100%;
}

.sub-masterbar-nav__select-icon {
	position: absolute;
		top: 10px;
		right: 15px;
	color: var( --color-neutral-0 );
	cursor: pointer;
	transition: all 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 );

	.sub-masterbar-nav__dropdown:not( .is-collapsed ) & {
		transform: rotate( 180deg );
	}
}
